<template>
  <div>
    <!-- table区域-begin -->
      <vxe-grid
        id="ExcelImportRuleList"
        ref="vxeTable"
        v-bind="gridOptions"
        :height="height - 40"
        :rowConfig="{keyField:'id'}"
        :sortConfig="{trigger: 'cell'}"
        :pagerConfig="false"
        :loading="tableLoading"
        v-on="listeners"
        :data="dataSource"
      >
      <template #action="{ row }">
        <template>
          <a @click="handleEdit(row)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
    </vxe-grid>
    <!-- table区域-end -->
    <ExcelImportMappingRulesModal :templateData="templateData" ref="modalForm" @ok="modalFormOk" />
  </div>
</template>

<script>
import ExcelImportMappingRulesModal from './ExcelImportMappingRulesModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
export default {
  name: 'ExcelImportRuleList',
  components: {
    ExcelImportMappingRulesModal
  },
  props: {
    templateData: {
      type: Object,
      default: () => {}
    },
    tableLoading: Boolean
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left' },
        { type: 'seq', width: 40, fixed: 'left' },
        {
          title: '名称',
          field: 'name',
          showOverflow: true,
          width: 100,
          sortable: true,
          fixed: 'left'
        },
        {
          title: 'Excel列号',
          sortable: true,
          field: 'excelColumn',
          showOverflow: true,
          width: 120
        },
        {
          title: '实体属性',
          field: 'propertyName',
          showOverflow: true,
          width: 100
        },
        {
          title: '前置',
          children: [
            {
              title: '解析器',
              field: 'cellPreParserBean',
              showOverflow: true,
              width: 120
            },
            {
              title: '参数',
              field: 'cellPreParserParam',
              showOverflow: true,
              width: 120
            }
          ]
        },
        {
          title: '后置',
          children: [
            {
              title: '解析器',

              field: 'cellPostParserBean',
              showOverflow: true,
              width: 120
            },
            {
              title: '参数',
              field: 'cellPostParserParam',
              showOverflow: true,
              width: 120
            }
          ]
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          width: 120,
          fixed: 'right'
        }
      ],
      url: {
        delete: '/excel/import/rule/remove/',
        deleteBatch: '/excel/import/rule/remove/',
        list: '/excel/import/list/'
      },
      dataSource: [],
      disabledProxy: true// 禁用表格Proxy功能，手动处理数据
    }
  },
  computed: {
    toolbarConfig() {
      return {
        export: false,
        print: false,
        import: false,
        refresh: false,
        buttons: [
          { buttonRender: { name: 'VxeToolbarAdd', events: { click: this.handleAdd }, disabled: Object.keys(this.templateData) <= 0 }},
          { buttonRender: { name: 'VxeToolbarBatchDel', events: { click: this.batchDel }, disabled: Object.keys(this.templateData) <= 0 }}
        ]
      }
    }
  },
  methods: {
    modalFormOk() {
      this.$emit('ok')
    },
    loadData() {
      this.$emit('ok')
    }
  },
  watch: {
    templateData: {
      handler(newData) {
        this.dataSource = newData.mappingRules || []
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

